<!-- 文本输入框 -->
<template>
  <div class="text" @contextmenu="showMenu">
    <vue-context-menu
      ref="reply"
      :context-menu-data="contextMenuData"
      @addReply="homed"
      @Drawer="Drawer"
      @deletedata="deletedata"
    />
    <div class="emoji">
      <i class="el-icon-picture-outline-round elround" @click="showEmoji=!showEmoji" />
      <i class="el-icon-folder-opened elround">
        <input ref="pic" type="file" class="pic" value="”点我上传“" @change="fileChange($event)">
      </i>
      <i @click="goDiagnose()">
        <img style="width: 1.75rem;position: relative;top: .1rem;padding-right: .7rem;" src="../../../../../assets/img/形状.png" title="写病历">
      </i>

      <!-- <i class="el-icon-chat-line-round elround" @click="showReply=!showReply" /> -->
      <i class="el-icon-chat-line-round elround" @click="drawer=true" @mouseover="applyHover = true" @mouseleave="applyHover = false" />
      <span v-if="applyHover" style="border: 0.5px solid #030303; padding: 4px">快捷回复</span>
      <transition name="showbox">
        <div v-show="showEmoji" class="emojiBox">
          <li v-for="(item, index) in emojis" :key="index">
            <img
              :src="require('@/assets/static/emoji/'+item.file)"
              :data="item.code"
              @click="showEmoji=!showEmoji,content +=item.code"
            >
          </li>
        </div>
      </transition>
      <div v-show="showReply" class="emojiBox1">
        <el-card class="box-card">
          <div
            v-for="(item, index) in contextMenuData.menulists[0].children"
            :key="index"
            class="text item"
          >{{ item.btnName }}</div>
        </el-card>
      </div>
    </div>
    <!-- <span v-show="hint" style="padding: 0 30px;position: absolute;color: #999;">点击鼠标右键可快捷回复.....</span> -->
    <textarea ref="text" v-model="content" @keyup="onKeyup" @click="showEmoji=false" />
    <div class="send" @click="send()">
      <span>发送(ent)</span>
    </div>
    <transition name="appear">
      <div v-show="warn" class="warn">
        <div class="description">不能发送空白信息</div>
      </div>
    </transition>
    <el-drawer
      title="快捷回复"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="28.5%"
    >
      <div class="demo-drawer__content">
        <div class="demo-input-suffix">
          <el-input v-model="input2" placeholder="请输入内容" prefix-icon="el-icon-search" />
        </div>
        <div style="padding: 0 10px;">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="默认回复" name="1">
              <div v-for="(item, index) in docAutoAnswers" :key="index">
                {{ item.title }}
                <el-button type="text" @click="homed2(item)">选择</el-button>
              </div>
            </el-collapse-item>
            <el-collapse-item title="新患者接待" name="2" />
            <el-collapse-item title="病情介绍" name="3" />
            <el-collapse-item title="繁忙时回复" name="4" />
          </el-collapse>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { twenAnswerQa, wzAnswerQa, twenOrderUpload, docAutoAnswer } from '@/api/interrogation'

export default {
  data() {
    return {
      applyHover: false,
      content: '',
      hint: true,
      reply: '未找到',
      frequency: 0,
      warn: false,
      showEmoji: false,
      showReply: false,
      // 菜单数据
      contextMenuData: {
        menuName: 'demo',
        // 菜单显示的位置
        axis: {
          x: null,
          y: null
        },
        // 菜单选项
        menulists: [
          {
            icoName: 'el-icon-edit', // icon图标
            btnName: '快捷回复', // 菜单名称
            children: [
              {
                fnHandler: 'addReply',
                btnName: '您好，请问有什么可以帮到您?'
              },
              {
                fnHandler: 'addReply',
                btnName: '我有事离开一下，马上回来，请稍候。'
              },
              {
                fnHandler: 'addReply',
                btnName: '还有其他伴随症状吗？'
              },
              {
                icoName: 'el-icon-circle-plus-outline',
                fnHandler: 'Drawer',
                btnName: '更多'
              }
            ]
          },
          {
            fnHandler: 'deletedata',
            icoName: 'el-icon-delete',
            btnName: '清空内容'
          }
        ]
      },
      // 话术
      docAutoAnswers: [],
      drawer: false,
      direction: 'ltr',
      input2: '',
      activeNames: ['1']
    }
  },
  computed: {
    ...mapState(['selectId', 'emojis', 'info']),
    ...mapGetters(['selectedChat']),
    tx() {
      const tx = JSON.parse(localStorage.getItem('doctor_info'))
      // advertisement
      return tx.data.advertisement
    }
  },
  watch: {
    // 在选择其它对话的时候 聚焦输入框
    selectId() {
      setTimeout(() => {
        this.$refs.text.focus()
      }, 0)
    },
    // 当输入框中的值为空时 弹出提示  并在一秒后消失
    content() {
      if (this.content === '') {
        this.hint = true
        if (this.frequency === 0) {
          this.warn = true
          this.frequency++
          setTimeout(() => {
            this.warn = false
          }, 1000)
        }
      } else {
        this.hint = false
      }
    }
  },
  // 在进入的时候 聚焦输入框
  mounted() {
    this.$refs.text.focus()
    this.docAutoAnswer()
  },
  methods: {
    // 按回车发送信息
    onKeyup(e) {
      if (e.keyCode === 13) {
        this.send()
      }
    },
    // 点击发送按钮发送信息
    send() {
      if (this.content.length <= 1) {
        this.warn = true
        this.content = ''
        setTimeout(() => {
          this.warn = false
        }, 1000)
      } else {
        const _this = this
        var bizcontent = {
          doctor_auth_token: this.$store.getters.token,
          id: this.selectedChat.orderid,
          text: _this.content,
          typedate: 0,
          upload_picture_list: '',
          role: 1,
          avatar: this.tx
        }
        var params = {
          text: _this.content,
          typedate: 0,
          upload_picture_list: '',
          role: 1,
          avatar: this.tx,
          create_time: ''
        }
        //
        console.log('发送后的list', this.list, this.selectedChat.orderid)
        if (this.selectedChat.v_status === 1) {
          console.log(1)
          // 视频发送消息
          this.content = ''
          this.save(params)
          wzAnswerQa(bizcontent).then(res => {
          }).catch(err => {
            console.log(err)
          })
        }
        if (this.selectedChat.v_status === 2) {
          console.log(2)
          // 图文发送消息
          this.content = ''
          this.save(params)
          twenAnswerQa(bizcontent).then(res => {
          }).catch(err => {
            console.log(err)
          })
        }
      }
    },
    save(params) {
      this.$emit('save', params)
    },
    // 发送文件消息
    fileChange() {
      var inputDOM = this.$refs.pic
      var file = inputDOM.files
      // eslint-disable-next-line no-unused-vars
      const name = this.getBase64(file).then(res => {
        const _this = this
        const params = {
          auth_token: _this.$store.getters.token,
          id: _this.selectedChat.orderid,
          text: '',
          typedate: 1,
          content: res,
          file_type: 'image',
          role: 1,
          avatar: _this.tx
        }
        if (this.selectedChat.v_status === 1) {
          // 视频上传的图片
          params.base_name = 'hyb_yl_wenzorder_qa'
          twenOrderUpload(params).then(res => {
            if (res) {
              this.content = ''
              const id = this.selectedChat.orderid
              this.save(id)
            }
          })
        }
        if (this.selectedChat.v_status === 2) {
          // 图文上传的图片
          params.base_name = 'hyb_yl_twenorder_qa'
          twenOrderUpload(params).then(res => {
            if (res) {
              this.content = ''
              const id = this.selectedChat.orderid
              this.save(id)
            }
          })
        }
      })
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file[0])
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    },
    showMenu() {
      event.preventDefault()
      var x = event.clientX
      var y = event.clientY
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y
      }
    },
    homed(item) {
      this.content += item.btnName
      this.$refs.text.focus()
    },
    homed2(item) {
      this.content += item.title
      this.drawer = false
    },
    deletedata() {
      console.log('delete!')
      this.content = ''
      this.$refs.text.focus()
    },
    handleClose(done) {
      done()
      console.log(done)
    },
    Drawer() {
      this.drawer = true
    },
    handleChange(val) {
      console.log(val)
    },
    docAutoAnswer() {
      const params = {
        auth_token: this.$store.getters.token
      }
      docAutoAnswer(params).then(res => {
        this.docAutoAnswers = res.data
        console.log('++++++++++++', res)
      })
    },
    goDiagnose() {
      console.log('跳转写病历', this.info)
      const item = this.info
      this.$router.push({
        name: 'Diagnose',
        query: {
          j_id: item.j_id,
          openid: item.openid,
          order_from: item.order_from,
          order_back: item.order_back
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.text {
  position: relative;
  height: 25%;
  background: #fff;

  /deep/ .btn-wrapper-simple {
    height: 100%;
    line-height: 20px;
  }

  /deep/ .child-ul-wrapper {
    max-height: 150px;
    overflow: scroll;
  }

  /deep/ .nav-name-right {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }

  /deep/ .el-drawer__header {
    margin-bottom: 0px;
  }

  .emoji {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    padding: 0 30px;
    box-sizing: border-box;
    color: #7c7c7c;

    .icon-look {
      cursor: pointer;

      &:hover {
        color: #1aad19;
      }
    }

    .elround {
      font-size: 20px;
      font-weight: 600;
      padding-right: 10px;
    }

    input.pic {
      position: absolute;
      height: 3vh;
      display: inline-block;
      width: 20px;
      border-radius: 10px;
      opacity: 0;
      left: 59px;
    }

    .emojiBox {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      top: -210px;
      left: -100px;
      width: 300px;
      height: 200px;
      padding: 5px;
      background-color: #fff;
      border: 1px solid #d1d1d1;
      border-radius: 2px;
      box-shadow: 0 1px 2px 1px #d1d1d1;

      &.showbox-enter-active, &.showbox-leave-active {
        transition: all 0.5s;
      }

      &.showbox-enter, &.showbox-leave-active {
        opacity: 0;
      }
    }

    .emojiBox1 {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      top: -210px;
      left: -100px;
      width: 300px;
      height: 200px;
      padding: 5px;
      border-radius: 2px;

      &.showbox-enter-active, &.showbox-leave-active {
        transition: all 0.5s;
      }

      &.showbox-enter, &.showbox-leave-active {
        opacity: 0;
      }
    }
  }

  textarea {
    box-sizing: border-box;
    padding: 0 30px;
    height: 110px;
    width: 100%;
    border: none;
    outline: none;
    font-family: 'Micrsofot Yahei';
    resize: none;
  }

  .send {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 75px;
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background: #f5f5f5;
    font-size: 14px;
    color: #7c7c7c;

    &:hover {
      background: rgb(18, 150, 17);
      color: #fff;
    }
  }

  .warn {
    position: absolute;
    bottom: 50px;
    right: 10px;
    width: 110px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    box-shadow: 0 1px 5px 1px #bdbdbd;

    &.appear-enter-active, &.appear-leave-active {
      transition: all 1s;
    }

    &.appear-enter, &.appear-leave-active {
      opacity: 0;
    }

    &:before {
      content: ' ';
      position: absolute;
      top: 100%;
      right: 20px;
      border: 7px solid transparent;
      border-top-color: #fff;
      filter: drop-shadow(1px 3px 2px #bdbdbd);
    }
  }
}
</style>

